<template>
    <div class="all animate__animated animate__fadeInBottomLeft">
        <h1>个人信息</h1>
        <div id="top">
            <!-- 头像 -->
            <el-row class="demo-avatar demo-basic">
                <el-col :span="12">
                    <div class="demo-basic--circle">
                        <div class="block">
                            <el-avatar shape="square" :size="50" :src="squareUrl" />
                        </div>
                    </div>
                </el-col>
            </el-row>
            <!-- 个人信息 -->
            <el-descriptions class="margin-top" :column="3"  border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon >
                                <user />
                            </el-icon>
                            姓名
                        </div>
                    </template>
                    Tom
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon >
                                <iphone />
                            </el-icon>
                            电话
                        </div>
                    </template>
                    18100000000
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon >
                                <location />
                            </el-icon>
                            所在城市
                        </div>
                    </template>
                    Guangzhou
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon >
                                <tickets />
                            </el-icon>
                            标签
                        </div>
                    </template>
                    <el-tag size="small">shop</el-tag>
                    <el-tag size="small">tea</el-tag>
                    <el-tag size="small">store</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            <el-icon >
                                <office-building />
                            </el-icon>
                            Address
                        </div>
                    </template>
                    No.1188, Tom Avenue, guangzhou District, Guangzhou, Guangdong Province
                </el-descriptions-item>
            </el-descriptions>


        </div>
        <!-- 卡片信息 -->
        <h1>数据信息</h1>
        <div id="card">
            <el-row :gutter="16">
                <el-col :span="8">
                    <div class="statistic-card">
                        <el-statistic :value="98500">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    日常活跃客流量
                                    <el-tooltip effect="dark"
                                        content="Number of users who logged into the product in one day" placement="top">
                                        <el-icon style="margin-left: 4px" :size="12">
                                            <Warning />
                                        </el-icon>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>与昨日相比</span>
                                <span class="green">
                                    24%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="statistic-card">
                        <el-statistic :value="693700">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    月度活跃客流量
                                    <el-tooltip effect="dark"
                                        content="Number of users who logged into the product in one month" placement="top">
                                        <el-icon style="margin-left: 4px" :size="12">
                                            <Warning />
                                        </el-icon>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>月度上升</span>
                                <span class="red">
                                    12%
                                    <el-icon>
                                        <CaretBottom />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="statistic-card">
                        <el-statistic :value="72000" title="New transactions today">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    今日最新数据
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>与昨日相比涨幅</span>
                                <span class="green">
                                    16%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                            </div>
                            <div class="footer-item">
                                <el-icon :size="14">
                                    <ArrowRight />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <h1>店铺信息</h1>
        <!-- 店铺信息列表 -->
        <el-table :data="tableData" style="width: 100%; border: 1px solid; z-index: 1;" max-height="250">
            <el-table-column fixed prop="date" label="注册时间" width="200" />
            <el-table-column prop="name" label="姓名" width="200" />
            <el-table-column prop="state" label="店铺名字" width="200" />
            <el-table-column prop="city" label="所在城市" width="200" />
            <el-table-column prop=phone label="店铺电话" width="200" />
            <el-table-column prop="zip" label="编号" width="200" />
            <el-table-column fixed="right" label="Operations" width="200">
                <template #default="scope">
                    <el-button link type="primary"  @click.prevent="deleteRow(scope.$index)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button class="mt-4" style="width: 100%" @click="onAddItem">添加</el-button>
    </div>
</template>
  
<script lang="ts" setup>
import dayjs from 'dayjs'
import { reactive, toRefs } from 'vue'
import { ref } from 'vue'
import {
    Iphone,
    Location,
    OfficeBuilding,
    Tickets,
    User,
} from '@element-plus/icons-vue'

// 头像
const state = reactive({
    squareUrl:
        'https://nwzimg.wezhan.cn/contents/sitefiles2033/10166460/images/40321369.png',
    sizeList: ['small', '', 'large'] as const,
})

const { squareUrl } = toRefs(state)

// 店铺信息
const now = new Date()

const tableData = ref([
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        phone: 1112322,
        zip: 'CA 90036',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        phone: 2132413,
        zip: 'CA 90036',
    },
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        phone: 1114345,
        zip: 'CA 90036',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        phone: 2314345,
        zip: 'CA 90036',
    },
])

const deleteRow = (index: number) => {
    tableData.value.splice(index, 1)
}

const onAddItem = () => {
    now.setDate(now.getDate() + 1)
    tableData.value.push({
        date: dayjs(now).format('YYYY-MM-DD'),
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        phone: parseInt(Math.random() * 10000000),
        zip: 'CA 90036',
    })
}
</script>
<style scoped>
.animate__animated .animate__fadeInBottomLeft{
  --animate-duration: 5s;
}
.all {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    z-index: 1;
}

.all::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background: url('../assets/images/03picture.jpg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    filter: blur(5px);
    z-index: -1;
}

.block {
    margin: 60px;
}

#card {
    background-color: #fff;
    padding: 0 150px;
    box-sizing: border-box;
    border: 1px solid;
    z-index: 1;
}

#top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    background-color: #fff;
    border: 1px solid;
    z-index: 1;

}

h1 {
    font-size: 30px;
    /* background-color: blue; */
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-left: 20px;
    padding: 5px;
    box-sizing: border-box;
}

:global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
}

.el-statistic {
    --el-statistic-content-font-size: 28px;
}

.statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
    box-sizing: border-box;
}

.statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
}

.statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.green {
    color: var(--el-color-success);
}

.red {
    color: var(--el-color-error);
}

.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>